<template>
	<view class="detail-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left" @tap="goBack">
				<image class="back-icon" src="/static/icons/arrow-left.png"></image>
			</view>
			<text class="page-title">投标详情</text>
			<view class="nav-right"></view>
		</view>
		
		<!-- 状态卡片 -->
		<view class="status-card" :class="statusClass">
			<view class="status-content">
				<image class="status-icon" :src="statusIcon"></image>
				<view class="status-info">
					<text class="status-text">{{ statusText }}</text>
					<text class="status-desc">{{ statusDesc }}</text>
				</view>
			</view>
			<view class="timeline">
				<view class="timeline-item" v-for="(item, index) in timeline" :key="index">
					<view class="time-point" :class="{'active': item.active}"></view>
					<view class="time-line" v-if="index < timeline.length - 1"></view>
					<view class="time-info">
						<text class="time-event">{{ item.event }}</text>
						<text class="time-date">{{ item.time }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 项目信息卡片 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">项目信息</text>
			</view>
			<view class="card-body">
				<text class="project-title">{{ projectInfo.title }}</text>
				<view class="project-meta">
					<view class="meta-item">
						<image class="meta-icon" src="/static/icons/budget.png"></image>
						<text class="meta-text">预算: {{ projectInfo.budget }}</text>
					</view>
					<view class="meta-item">
						<image class="meta-icon" src="/static/icons/calendar.png"></image>
						<text class="meta-text">截止: {{ projectInfo.deadline }}</text>
					</view>
					<view class="meta-item">
						<image class="meta-icon" src="/static/icons/location.png"></image>
						<text class="meta-text">{{ projectInfo.location }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 投标信息卡片 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">投标信息</text>
				<text class="bid-number">投标编号: {{ bidInfo.bidNumber }}</text>
			</view>
			<view class="card-body">
				<view class="bid-item">
					<text class="bid-label">投标报价</text>
					<text class="bid-value price">￥{{ bidInfo.price }}{{ bidInfo.priceUnit }}</text>
				</view>
				<view class="bid-item">
					<text class="bid-label">服务周期</text>
					<text class="bid-value">{{ bidInfo.duration }}{{ bidInfo.durationUnit }}</text>
				</view>
				<view class="bid-item">
					<text class="bid-label">投标时间</text>
					<text class="bid-value">{{ bidInfo.submitTime }}</text>
				</view>
			</view>
		</view>
		
		<!-- 技术方案卡片 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">技术方案</text>
			</view>
			<view class="card-body">
				<view class="section">
					<text class="section-title">技术描述</text>
					<text class="section-content">{{ bidInfo.technical }}</text>
				</view>
				<view class="section">
					<text class="section-title">优势亮点</text>
					<text class="section-content">{{ bidInfo.advantages }}</text>
				</view>
				<view class="section">
					<text class="section-title">资质证明</text>
					<view class="file-list">
						<view class="file-item" v-for="(file, index) in bidInfo.qualifications" :key="index">
							<image class="file-icon" :src="getFileIcon(file.type)"></image>
							<text class="file-name">{{ file.name }}</text>
							<view class="file-action" @tap="previewFile(file)">
								<text class="action-text">预览</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 联系信息卡片 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">联系信息</text>
			</view>
			<view class="card-body">
				<view class="contact-item">
					<text class="contact-label">联系人</text>
					<text class="contact-value">{{ bidInfo.contact.name }}</text>
				</view>
				<view class="contact-item">
					<text class="contact-label">联系电话</text>
					<text class="contact-value">{{ bidInfo.contact.phone }}</text>
				</view>
				<view class="contact-item">
					<text class="contact-label">电子邮箱</text>
					<text class="contact-value">{{ bidInfo.contact.email }}</text>
				</view>
			</view>
		</view>
		
		<!-- 补充信息卡片 -->
		<view class="card" v-if="bidInfo.additional">
			<view class="card-header">
				<text class="card-title">补充信息</text>
			</view>
			<view class="card-body">
				<text class="additional-content">{{ bidInfo.additional }}</text>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-actions" v-if="bidInfo.status === 'waiting'">
			<button class="action-btn secondary-btn" @tap="withdrawBid">撤回投标</button>
			<button class="action-btn primary-btn" @tap="editBid">修改投标</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bidId: null,
				projectInfo: {
					id: '101',
					title: '智能制造设备采购项目',
					budget: '600-800万元',
					deadline: '2023-07-15',
					location: '上海'
				},
				bidInfo: {
					bidNumber: 'BID20230610123',
					price: '680',
					priceUnit: '万元',
					duration: '90',
					durationUnit: '天',
					submitTime: '2023-06-10 15:32:45',
					status: 'waiting', // waiting, accepted, rejected, completed
					technical: '本公司将提供最先进的智能制造设备，采用德国进口核心部件，设备精度可达±0.01mm，稳定性高，故障率低。设备配备智能监控系统，可实时监测生产状态，并自动上传数据至云平台，便于远程管理。',
					advantages: '1. 10年智能制造设备供应经验，服务过超过200家制造企业\n2. 拥有完整的设备安装调试团队，响应速度快\n3. 提供7*24小时技术支持和维修服务\n4. 设备可定制化，根据客户需求灵活配置',
					qualifications: [
						{ name: '营业执照.pdf', type: 'pdf', url: '/static/files/license.pdf' },
						{ name: '资质证书.pdf', type: 'pdf', url: '/static/files/certification.pdf' },
						{ name: '案例展示.pptx', type: 'ppt', url: '/static/files/cases.pptx' }
					],
					contact: {
						name: '张经理',
						phone: '13812345678',
						email: 'zhang@example.com'
					},
					additional: '我们可以在项目交付后提供为期一年的免费培训服务，确保贵公司员工能够熟练操作设备。同时，我们愿意提供三年的质保期，高于行业标准的两年质保期。'
				},
				timeline: [
					{ event: '提交投标', time: '2023-06-10 15:32', active: true },
					{ event: '等待审核', time: '进行中', active: true },
					{ event: '项目方查看', time: '', active: false },
					{ event: '确认中标', time: '', active: false }
				]
			}
		},
		computed: {
			statusText() {
				const statusMap = {
					'waiting': '审核中',
					'accepted': '已中标',
					'rejected': '未中标',
					'completed': '已完成'
				};
				return statusMap[this.bidInfo.status] || '审核中';
			},
			statusDesc() {
				const descMap = {
					'waiting': '您的投标已提交，正在等待项目方审核',
					'accepted': '恭喜您已中标，请等待项目方联系',
					'rejected': '很遗憾，您的投标未被选中',
					'completed': '项目已完成，感谢您的参与'
				};
				return descMap[this.bidInfo.status] || '';
			},
			statusIcon() {
				const iconMap = {
					'waiting': '/static/icons/waiting.png',
					'accepted': '/static/icons/success.png',
					'rejected': '/static/icons/rejected.png',
					'completed': '/static/icons/completed.png'
				};
				return iconMap[this.bidInfo.status] || '/static/icons/waiting.png';
			},
			statusClass() {
				return `status-${this.bidInfo.status}`;
			}
		},
		onLoad(options) {
			if (options.id) {
				this.bidId = options.id;
				// 在实际项目中，应该从后端获取投标详情
				// this.getBidDetail(this.bidId);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getFileIcon(type) {
				const iconMap = {
					'pdf': '/static/icons/pdf.png',
					'doc': '/static/icons/word.png',
					'docx': '/static/icons/word.png',
					'xls': '/static/icons/excel.png',
					'xlsx': '/static/icons/excel.png',
					'ppt': '/static/icons/ppt.png',
					'pptx': '/static/icons/ppt.png',
					'jpg': '/static/icons/image.png',
					'jpeg': '/static/icons/image.png',
					'png': '/static/icons/image.png'
				};
				return iconMap[type] || '/static/icons/file.png';
			},
			previewFile(file) {
				// 预览文件，实际项目中应该使用uni.openDocument或其他方式预览
				uni.showToast({
					title: '预览文件: ' + file.name,
					icon: 'none'
				});
			},
			withdrawBid() {
				uni.showModal({
					title: '撤回投标',
					content: '确定要撤回此投标吗？撤回后将无法恢复。',
					success: (res) => {
						if (res.confirm) {
							// 在实际项目中应该调用API撤回投标
							uni.showToast({
								title: '投标已撤回',
								icon: 'success'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				});
			},
			editBid() {
				// 跳转到编辑投标页面
				uni.navigateTo({
					url: `/pages/bid/bid-form?id=${this.bidId}&projectId=${this.projectInfo.id}&mode=edit`
				});
			}
		}
	}
</script>

<style>
	.detail-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		display: flex;
		flex-direction: column;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
	}
	
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.nav-left, .nav-right {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.status-card {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.status-content {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
	}
	
	.status-waiting {
		border-top: 8rpx solid #f59e0b;
	}
	
	.status-accepted {
		border-top: 8rpx solid #10b981;
	}
	
	.status-rejected {
		border-top: 8rpx solid #ef4444;
	}
	
	.status-completed {
		border-top: 8rpx solid #6366f1;
	}
	
	.status-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	
	.status-info {
		flex: 1;
	}
	
	.status-text {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.status-desc {
		font-size: 28rpx;
		color: #666;
	}
	
	.timeline {
		padding: 20rpx 30rpx 40rpx;
		border-top: 1px solid #f0f0f0;
	}
	
	.timeline-item {
		display: flex;
		position: relative;
		padding: 0 0 0 30rpx;
	}
	
	.time-point {
		position: absolute;
		left: 0;
		top: 10rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #d1d5db;
		z-index: 1;
	}
	
	.time-point.active {
		background-color: #3b82f6;
	}
	
	.time-line {
		position: absolute;
		left: 9rpx;
		top: 30rpx;
		width: 2rpx;
		height: calc(100% - 10rpx);
		background-color: #d1d5db;
	}
	
	.time-info {
		padding: 0 0 30rpx 20rpx;
	}
	
	.time-event {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 5rpx;
	}
	
	.time-date {
		font-size: 24rpx;
		color: #666;
	}
	
	.card {
		margin: 0 30rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-header {
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
	
	.bid-number {
		font-size: 24rpx;
		color: #666;
	}
	
	.card-body {
		padding: 30rpx;
	}
	
	.project-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}
	
	.project-meta {
		display: flex;
		flex-wrap: wrap;
	}
	
	.meta-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		margin-bottom: 10rpx;
	}
	
	.meta-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	
	.meta-text {
		font-size: 26rpx;
		color: #666;
	}
	
	.bid-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.bid-item:last-child {
		border-bottom: none;
	}
	
	.bid-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.bid-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.bid-value.price {
		color: #f59e0b;
		font-weight: 600;
	}
	
	.section {
		margin-bottom: 30rpx;
	}
	
	.section:last-child {
		margin-bottom: 0;
	}
	
	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 15rpx;
	}
	
	.section-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.file-list {
		display: flex;
		flex-direction: column;
	}
	
	.file-item {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.file-item:last-child {
		border-bottom: none;
	}
	
	.file-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}
	
	.file-name {
		flex: 1;
		font-size: 28rpx;
		color: #666;
	}
	
	.file-action {
		padding: 5rpx 20rpx;
		background-color: #f0f7ff;
		border-radius: 30rpx;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #3b82f6;
	}
	
	.contact-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.contact-item:last-child {
		border-bottom: none;
	}
	
	.contact-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.contact-value {
		font-size: 28rpx;
		color: #333;
	}
	
	.additional-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.bottom-actions {
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		margin-top: auto;
		border-top: 1px solid #f0f0f0;
		background-color: #fff;
	}
	
	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	.secondary-btn {
		background-color: #f3f4f6;
		color: #6b7280;
		margin-right: 20rpx;
	}
	
	.primary-btn {
		background-color: #1d4ed8;
		color: #fff;
	}
</style> 